<template>
  <div class="left-top">
    <div class="headers_order_cnter">
      <div class="headers_right">
        <span>订单流程</span>
      </div>
      <div class="headers_left"></div>
    </div>
    <div class="content">
      <div class="contentBox">
        <div class="contentBox_left">
          <div class="contentBox_left_title">项目期</div>
          <div class="contentBox_left_content">
            <div class="contentBox_left_content_right">
              <div
                class="contentBox_left_content_left_title"
                v-for="(item, index) in xmq.one"
                :key="index"
              >
                <!-- 只有当 item.isProcess 等于 1 时，才显示 el-popover -->
                <el-popover
                  v-if="item.isProcess == '1'"
                  trigger="click"
                  placement="top"
                >
                  <div style="text-align: center; margin: 0">
                    <el-button
                      @click="openUrl(item.viewUrl)"
                      type="text"
                      style="background: #f1f5ff; color: #ffffff; width: 45%"
                      >流程视图</el-button
                    >
                    <el-button
                      @click="openUrl1(item)"
                      type="text"
                      style="background: #f1f5ff; color: #ffffff; width: 45%"
                      >流程新增</el-button
                    >
                  </div>
                  <template #reference>
                    <div
                      class="contentBox_left_content_left_title_box"
                      :class="{
                        'bg-red': index === 0 && item.existProcess === 'false',
                        'bg-green':
                          index === 0 && item.existProcess !== 'false',
                      }"
                    >
                     
                        <div
                          class="contentBox_left_content_left_title_box_title"
                        >
                          <span>{{ item.process }}</span>
                        </div>
                  

                      <div
                        class="contentBox_left_content_left_title_box_number"
                        v-if="item.dbSl !== '' && item.dbSl !== '0'"
                      >
                        <span>待办{{ item.dbSl }}</span>
                      </div>
                    </div>
                  </template>
                </el-popover>

                <!-- 当 item.isProcess 不为 1 时，直接显示标题和待办数量 -->
                <div
                  @click="openUrl(item.viewUrl)"
                  v-else
                  class="contentBox_left_content_left_title_box"
                  :class="{
                    'bg-red': index === 0 && item.existProcess === 'false',
                    'bg-green': index === 0 && item.existProcess !== 'false',
                  }"
                >
                
                    <div class="contentBox_left_content_left_title_box_title">
                      <span>{{ item.process }}</span>
                    </div>
              
                  <div
                    class="contentBox_left_content_left_title_box_number"
                    v-if="item.dbSl !== '' && item.dbSl !== '0'"
                  >
                    <span>待办{{ item.dbSl }}</span>
                  </div>
                </div>
              </div>
            </div>
            <div class="contentBox_left_content_center">
              <div class="contentBoxarrary_img">
                <img src="../../assets/img/rightarray.png" alt="" />
              </div>
            </div>
            <div class="contentBox_left_content_right">
              <div
                class="contentBox_left_content_left_title"
                v-for="(item, index) in xmq.two"
                :key="index"
              >
                <!-- 只有当 item.isProcess 等于 1 时，才显示 el-popover -->
                <el-popover
                  v-if="item.isProcess == '1'"
                  trigger="click"
                  placement="top"
                >
                  <div style="text-align: center; margin: 0">
                    <el-button
                      @click="openUrl(item.viewUrl)"
                      type="text"
                      style="background: #f1f5ff; color: #ffffff; width: 45%"
                      >流程视图</el-button
                    >
                    <el-button
                      @click="openUrl1(item)"
                      type="text"
                      style="background: #f1f5ff; color: #ffffff; width: 45%"
                      >流程新增</el-button
                    >
                  </div>
                  <template #reference>
                    <div
                      class="contentBox_left_content_left_title_box"
                      :class="{
                        'bg-red': index === 0 && item.existProcess === 'false',
                        'bg-green':
                          index === 0 && item.existProcess !== 'false',
                      }"
                    >
                   
                        <div
                          class="contentBox_left_content_left_title_box_title"
                        >
                          <span>{{ item.process }}</span>
                        </div>
                
                      <div
                        class="contentBox_left_content_left_title_box_number"
                        v-if="item.dbSl !== '' && item.dbSl !== '0'"
                      >
                        <span>待办{{ item.dbSl }}</span>
                      </div>
                    </div>
                  </template>
                </el-popover>

                <!-- 当 item.isProcess 不为 1 时，直接显示标题和待办数量 -->
                <div
                  @click="openUrl(item.viewUrl)"
                  v-else
                  class="contentBox_left_content_left_title_box"
                  :class="{
                    'bg-red': index === 0 && item.existProcess === 'false',
                    'bg-green': index === 0 && item.existProcess !== 'false',
                  }"
                >
                
                    <div class="contentBox_left_content_left_title_box_title">
                      <span>{{ item.process }}</span>
                    </div>
             
                  <div
                    class="contentBox_left_content_left_title_box_number"
                    v-if="item.dbSl !== '' && item.dbSl !== '0'"
                  >
                    <span>待办{{ item.dbSl }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="contentBoxarrary">
          <div class="contentBoxarrary_img">
            <img src="../../assets/img/rightarray.png" alt="" />
          </div>
        </div>
        <div class="contentBox_center">
          <div class="contentBox_left_title">合同期</div>
          <div class="contentBox_left_content">
            <div class="contentBox_left_content_right">
              <div
                class="contentBox_left_content_left_title"
                v-for="(item, index) in htq.one"
                :key="index"
              >
                <!-- 只有当 item.isProcess 等于 1 时，才显示 el-popover -->
                <el-popover
                  v-if="item.isProcess == '1'"
                  trigger="click"
                  placement="top"
                >
                  <div style="text-align: center; margin: 0">
                    <el-button
                      @click="openUrl(item.viewUrl)"
                      type="text"
                      style="background: #f1f5ff; color: #ffffff; width: 45%"
                      >流程视图</el-button
                    >
                    <el-button
                      @click="openUrl1(item)"
                      type="text"
                      style="background: #f1f5ff; color: #ffffff; width: 45%"
                      >流程新增</el-button
                    >
                  </div>
                  <template #reference>
                    <div
                      class="contentBox_left_content_left_title_box"
                      :class="{
                        'bg-red': index === 0 && item.existProcess === 'false',
                        'bg-green':
                          index === 0 && item.existProcess !== 'false',
                      }"
                    >
                  
                        <div
                          class="contentBox_left_content_left_title_box_title"
                        >
                          <span>{{ item.process }}</span>
                        </div>
                  
                      <div
                        class="contentBox_left_content_left_title_box_number"
                        v-if="item.dbSl !== '' && item.dbSl !== '0'"
                      >
                        <span>待办{{ item.dbSl }}</span>
                      </div>
                    </div>
                  </template>
                </el-popover>

                <!-- 当 item.isProcess 不为 1 时，直接显示标题和待办数量 -->
                <div
                  @click="openUrl(item.viewUrl)"
                  v-else
                  class="contentBox_left_content_left_title_box"
                  :class="{
                    'bg-red': index === 0 && item.existProcess === 'false',
                    'bg-green': index === 0 && item.existProcess !== 'false',
                  }"
                >
             
                    <div class="contentBox_left_content_left_title_box_title">
                      <span>{{ item.process }}</span>
                    </div>
          
                  <div
                    class="contentBox_left_content_left_title_box_number"
                    v-if="item.dbSl !== '' && item.dbSl !== '0'"
                  >
                    <span>待办{{ item.dbSl }}</span>
                  </div>
                </div>
              </div>
            </div>
            <div
              class="contentBox_left_content_center"
              v-if="htq.two.length !== 0"
            >
              <div class="contentBoxarrary_img">
                <img src="../../assets/img/rightarray.png" alt="" />
              </div>
            </div>
            <div class="contentBox_left_content_right">
              <div
                class="contentBox_left_content_left_title"
                v-for="(item, index) in htq.two"
                :key="index"
              >
                <!-- 只有当 item.isProcess 等于 1 时，才显示 el-popover -->
                <el-popover
                  v-if="item.isProcess == '1'"
                  trigger="click"
                  placement="top"
                >
                  <div style="text-align: center; margin: 0">
                    <el-button
                      @click="openUrl(item.viewUrl)"
                      type="text"
                      style="background: #f1f5ff; color: #ffffff; width: 45%"
                      >流程视图</el-button
                    >
                    <el-button
                      @click="openUrl1(item)"
                      type="text"
                      style="background: #f1f5ff; color: #ffffff; width: 45%"
                      >流程新增</el-button
                    >
                  </div>
                  <template #reference>
                    <div
                      class="contentBox_left_content_left_title_box"
                      :class="{
                        'bg-red': index === 0 && item.existProcess === 'false',
                        'bg-green':
                          index === 0 && item.existProcess !== 'false',
                      }"
                    >
                   
                        <div
                          class="contentBox_left_content_left_title_box_title"
                        >
                          <span>{{ item.process }}</span>
                        </div>
                   
                      <div
                        class="contentBox_left_content_left_title_box_number"
                        v-if="item.dbSl !== '' && item.dbSl !== '0'"
                      >
                        <span>待办{{ item.dbSl }}</span>
                      </div>
                    </div>
                  </template>
                </el-popover>

                <!-- 当 item.isProcess 不为 1 时，直接显示标题和待办数量 -->
                <div
                  @click="openUrl(item.viewUrl)"
                  v-else
                  class="contentBox_left_content_left_title_box"
                  :class="{
                    'bg-red': index === 0 && item.existProcess === 'false',
                    'bg-green': index === 0 && item.existProcess !== 'false',
                  }"
                >
               
                    <div class="contentBox_left_content_left_title_box_title">
                      <span>{{ item.process }}</span>
                    </div>
               
                  <div
                    class="contentBox_left_content_left_title_box_number"
                    v-if="item.dbSl !== '' && item.dbSl !== '0'"
                  >
                    <span>待办{{ item.dbSl }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="contentBoxarrary">
          <div class="contentBoxarrary_img">
            <img src="../../assets/img/rightarray.png" alt="" />
          </div>
        </div>
        <div class="contentBox_right">
          <div class="contentBox_left_title">交付期</div>
          <div class="contentBox_left_content">
            <div class="contentBox_left_content_right">
              <div
                class="contentBox_left_content_left_title"
                v-for="(item, index) in jfq.one"
                :key="index"
              >
                <!-- 只有当 item.isProcess 等于 1 时，才显示 el-popover -->
                <el-popover
                  v-if="item.isProcess == '1'"
                  trigger="click"
                  placement="top"
                >
                  <div style="text-align: center; margin: 0">
                    <el-button
                      @click="openUrl(item.viewUrl)"
                      type="text"
                      style="background: #f1f5ff; color: #ffffff; width: 45%"
                      >流程视图</el-button
                    >
                    <el-button
                      @click="openUrl1(item)"
                      type="text"
                      style="background: #f1f5ff; color: #ffffff; width: 45%"
                      >流程新增</el-button
                    >
                  </div>
                  <template #reference>
                    <div
                      class="contentBox_left_content_left_title_box"
                      :class="{
                        'bg-red': index === 0 && item.existProcess === 'false',
                        'bg-green':
                          index === 0 && item.existProcess !== 'false',
                      }"
                    >
                  
                        <div
                          class="contentBox_left_content_left_title_box_title"
                        >
                          <span>{{ item.process }}</span>
                        </div>
                 
                      <div
                        class="contentBox_left_content_left_title_box_number"
                        v-if="item.dbSl !== '' && item.dbSl !== '0'"
                      >
                        <span>待办{{ item.dbSl }}</span>
                      </div>
                    </div>
                  </template>
                </el-popover>

                <!-- 当 item.isProcess 不为 1 时，直接显示标题和待办数量 -->
                <div
                  @click="openUrl(item.viewUrl)"
                  v-else
                  class="contentBox_left_content_left_title_box"
                  :class="{
                    'bg-red': index === 0 && item.existProcess === 'false',
                    'bg-green': index === 0 && item.existProcess !== 'false',
                  }"
                >
                 
                    <div class="contentBox_left_content_left_title_box_title">
                      <span>{{ item.process }}</span>
                    </div>
            
                  <div
                    class="contentBox_left_content_left_title_box_number"
                    v-if="item.dbSl !== '' && item.dbSl !== '0'"
                  >
                    <span>待办{{ item.dbSl }}</span>
                  </div>
                </div>
              </div>
            </div>
            <div
              class="contentBox_left_content_center"
              v-if="jfq.two.length > 0"
            >
              <div class="contentBoxarrary_img">
                <img src="../../assets/img/rightarray.png" alt="" />
              </div>
            </div>
            <div class="contentBox_left_content_right">
              <div
                class="contentBox_left_content_left_title"
                v-for="(item, index) in jfq.two"
                :key="index"
              >
                <!-- 只有当 item.isProcess 等于 1 时，才显示 el-popover -->
                <el-popover
                  v-if="item.isProcess == '1'"
                  trigger="click"
                  placement="top"
                >
                  <div style="text-align: center; margin: 0">
                    <el-button
                      @click="openUrl(item.viewUrl)"
                      type="text"
                      style="background: #f1f5ff; color: #ffffff; width: 45%"
                      >流程视图</el-button
                    >
                    <el-button
                      @click="openUrl1(item)"
                      type="text"
                      style="background: #f1f5ff; color: #ffffff; width: 45%"
                      >流程新增</el-button
                    >
                  </div>
                  <template #reference>
                    <div
                      class="contentBox_left_content_left_title_box"
                      :class="{
                        'bg-red': index === 0 && item.existProcess === 'false',
                        'bg-green':
                          index === 0 && item.existProcess !== 'false',
                      }"
                    >
                  
                        <div
                          class="contentBox_left_content_left_title_box_title"
                        >
                          <span>{{ item.process }}</span>
                        </div>
                
                      <div
                        class="contentBox_left_content_left_title_box_number"
                        v-if="item.dbSl !== '' && item.dbSl !== '0'"
                      >
                        <span>待办{{ item.dbSl }}</span>
                      </div>
                    </div>
                  </template>
                </el-popover>

                <!-- 当 item.isProcess 不为 1 时，直接显示标题和待办数量 -->
                <div
                  @click="openUrl(item.viewUrl)"
                  v-else
                  class="contentBox_left_content_left_title_box"
                  :class="{
                    'bg-red': index === 0 && item.existProcess === 'false',
                    'bg-green': index === 0 && item.existProcess !== 'false',
                  }"
                >
                 
                    <div class="contentBox_left_content_left_title_box_title">
                      <span>{{ item.process }}</span>
                    </div>
             
                  <div
                    class="contentBox_left_content_left_title_box_number"
                    v-if="item.dbSl !== '' && item.dbSl !== '0'"
                  >
                    <span>待办{{ item.dbSl }}</span>
                  </div>
                </div>
              </div>
            </div>
            <div
              class="contentBox_left_content_center"
              v-if="jfq.three.length > 0"
            >
              <div class="contentBoxarrary_img">
                <img src="../../assets/img/rightarray.png" alt="" />
              </div>
            </div>
            <div class="contentBox_left_content_right">
              <div
                class="contentBox_left_content_left_title"
                v-for="(item, index) in jfq.three"
                :key="index"
              >
                <!-- 只有当 item.isProcess 等于 1 时，才显示 el-popover -->
                <el-popover
                  v-if="item.isProcess == '1'"
                  trigger="click"
                  placement="top"
                >
                  <div style="text-align: center; margin: 0">
                    <el-button
                      @click="openUrl(item.viewUrl)"
                      type="text"
                      style="background: #f1f5ff; color: #ffffff; width: 45%"
                      >流程视图</el-button
                    >
                    <el-button
                      @click="openUrl1(item)"
                      type="text"
                      style="background: #f1f5ff; color: #ffffff; width: 45%"
                      >流程新增</el-button
                    >
                  </div>
                  <template #reference>
                    <div
                      class="contentBox_left_content_left_title_box"
                      :class="{
                        'bg-red': index === 0 && item.existProcess === 'false',
                        'bg-green':
                          index === 0 && item.existProcess !== 'false',
                      }"
                    >
                  
                        <div
                          class="contentBox_left_content_left_title_box_title"
                        >
                          <span>{{ item.process }}</span>
                        </div>
               
                      <div
                        class="contentBox_left_content_left_title_box_number"
                        v-if="item.dbSl !== '' && item.dbSl !== '0'"
                      >
                        <span>待办{{ item.dbSl }}</span>
                      </div>
                    </div>
                  </template>
                </el-popover>

                <!-- 当 item.isProcess 不为 1 时，直接显示标题和待办数量 -->
                <div
                  v-else
                  class="contentBox_left_content_left_title_box"
                  :class="{
                    'bg-red': index === 0 && item.existProcess == 'false',
                    'bg-green': index === 0 && item.existProcess !== 'false',
                  }"
                >
                
                    <div class="contentBox_left_content_left_title_box_title">
                      <span>{{ item.process }}</span>
                    </div>
          
                  <div
                    class="contentBox_left_content_left_title_box_number"
                    v-if="item.dbSl !== '' && item.dbSl !== '0'"
                  >
                    <span>待办{{ item.dbSl }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <el-dialog
          :visible.sync="showModal"
          title="选择合同号"
          :show-close="false"
          width="30%"
          @close="resetDialog"
        >
          <div
            style="font-size: 15px; padding-bottom: 10px; color: #f20f0f"
            v-if="isContractRequired == false"
          >
            支持无合同备案流程发起
          </div>
          <!-- 搜索框 -->
          <el-input
            v-model="searchQuery"
            @change="searchQuerys"
            placeholder="搜索合同号"
            prefix-icon="el-icon-search"
            clearable
            style="margin-bottom: 15px"
          ></el-input>

          <!-- 合同号选择 -->
          <div class="ridoiList">
            <el-radio-group v-model="selectedOption">
              <el-radio
                style="width: 90%; margin-bottom: 20px"
                v-for="option in filteredOptions"
                :key="option"
                :label="option"
              >
                {{ option }}
              </el-radio>
            </el-radio-group>
          </div>

          <!-- Dialog 底部按钮 -->
          <span slot="footer" class="dialog-footer">
            <el-button @click="closeModal">取消</el-button>
            <el-button type="primary" @click="confirmSelection">确定</el-button>
          </span>
        </el-dialog>
      </div>
    </div>
  </div>
</template>
    
    <script>
import { getNavbar } from "@/api/index";
export default {
  data() {
    return {
      portalPath:window.portalPath,
      isContractRequired: false,
      showModal: false,
      selectedOption: null,
      searchQuery: "", // 搜索框的输入值
      jfq: {},
      htq: {},
      xmq: {},

      selectedOption: "",
      selectedYear: "",
      selectedQuarter: "",
      obj: [],
      cmd: "",
    };
  },
  props: {
    xmbh: {
      type: String,
      required: true,
    },
  },
  mounted() {
    this.getlist();
    this.getlist1();
  },
  computed: {
    // 根据搜索内容过滤合同号列表
    filteredOptions() {
      return this.obj.filter(
        (option) =>
          option.toLowerCase().includes(this.searchQuery.toLowerCase()) // 忽略大小写
      );
    },
  },
  methods: {
    resetDialog() {
      this.showModal = false;
      this.searchQuery = "";
      // 只有在需要必选合同的情况下才重置 selectedOption
      if (this.isContractRequired) {
        this.selectedOption = "";
      }
    },
    searchQuerys() {
      this.obj.filter(
        (option) =>
          option.toLowerCase().includes(this.searchQuery.toLowerCase()) // 忽略大小写
      );
    },
    //查询
    getlist1() {
      if (!this.xmbh) {

        return; // 如果未传递，提前返回
      }
      var param = {
        sid: window.sid,
        cmd: "com.bono.portal.order.getOrderInfo",
        xmbh: this.xmbh,
        company: sessionStorage.getItem("company"),
      };
      getNavbar(param).then((res) => {

        this.obj = res.data.djh;
      });
    },
    openUrl1(item) {
    
      if (item.isContract !== "0") {
        if (item.mustContract == "1" && this.obj.length == 0) {
          this.$message.error("此订单立项下无结束的合同备案流程，请知晓！");
        } else {
          this.isContractRequired = item.mustContract == "1";
          this.showModal = true;
          this.cmd = item.startUrl;
          
          // 添加默认选中逻辑
          if (this.isContractRequired && this.obj.length > 0) {
            this.selectedOption = this.obj[0];
          }
        }
      } else {
        var param = {
          sid: window.sid,
          cmd: item.startUrl,
          orderId: this.xmbh,
        };
        getNavbar(param).then((res) => {
          if (res.result == "error") {
            this.$message.error(res.msg);
          } else {
            let processInstId = res.data.processInstId;
            let taskInstId = res.data.taskInstId;
            window.open(
               portalPath+"/r/w?sid=" +
                window.sid +
                "&cmd=CLIENT_BPM_FORM_MAIN_PAGE_OPEN&processInstId=" +
                processInstId +
                "&openState=1&taskInstId=" +
                taskInstId +
                "&displayToolbar=true"
            );
          }
        });
      }
    },

    closeModal() {
      this.showModal = false;
      this.selectedOption = null; // 重置选中项
    },
    confirmSelection() {
      if (this.isContractRequired && !this.selectedOption) {
        this.$message.error("请先选择一个选项");
      } else {
        // 执行确认逻辑

        var param = {
          sid: window.sid,
          cmd: this.cmd,
          orderId: this.xmbh,
          djh: this.selectedOption,
        };
        getNavbar(param).then((res) => {
  
          let processInstId = res.data.processInstId;
          let taskInstId = res.data.taskInstId;
          window.open(
            portalPath+ "/r/w?sid=" +
              window.sid +
              "&cmd=CLIENT_BPM_FORM_MAIN_PAGE_OPEN&processInstId=" +
              processInstId +
              "&openState=1&taskInstId=" +
              taskInstId +
              "&displayToolbar=true"
          );
        });
        // this.closeModal();
      }
    },
    openUrl(url) {
      if (url) {
        window.open(url, "_blank"); // 在新标签页中打开 URL
      }
    },
    //查询
    getlist() {
      if (!this.xmbh) {
   
        return; // 如果未传递，提前返回
      }
      var param = {
        sid: window.sid,
        cmd: "com.bono.portal.order.getProcesslist",
        xmbh: this.xmbh,
        company: sessionStorage.getItem("company"),
      };
      getNavbar(param).then((res) => {
 
        this.htq = res.data.htq;
        this.jfq = res.data.jfq;
        this.xmq = res.data.xmq;
      });
    },
    handleSelectChange() {
      this.selectedYear = "";
      this.selectedQuarter = "";
    },
    queryData() {
  
    },
  },
};
</script>
  
  <style lang="scss" scoped >
.bg-green {
  background: linear-gradient(90deg, #70a4f8 0%, #2c64df 100%) !important;
}
.bg-green .contentBox_left_content_left_title_box_title span {
  color: #ffffff !important;
}

.bg-red {
  background: linear-gradient(90deg, #d5e3ff 0%, #c5d8fe 100%) !important;
}
.ridoiList {
  height: 300px; /* 设置固定高度，可以根据需要调整 */
  overflow-y: auto; /* 超出部分显示滚动条 */
  padding-right: 10px; /* 可选，防止滚动条覆盖内容 */
}
.titles {
  font-family: PingFang SC;
  font-weight: 500;
  font-size: 13px;
  color: #333333;
}

.hovered .titles {
  color: #1e4398; /* 鼠标悬停时标题颜色 */
  cursor: pointer;
}

.new-icon {
  margin-left: 4px; /* 新图标与标题之间的间距 */
  width: 36px;
  height: 18px;
}

.date {
  margin-left: auto; /* 日期靠右对齐 */
  font-size: 12px; /* 日期字体大小 */
  font-family: PingFang SC;
  font-weight: 400;
  font-size: 14px;
  color: #666666;
}
.left-top {
  padding: 20px;
  background: rgba(255, 255, 255, 0.7);
  box-shadow: 0px 2px 6px 0px rgba(139, 157, 175, 0.1);
  border-radius: 10px;
}

.headers_order_cnter {
  padding-bottom: 15px;
  display: flex;
  justify-content: space-between;
}
.headers_order_cnter .headers_left span {
  font-family: "PingFang SC", sans-serif;
  font-weight: bold;
  font-size: 18px;
  color: #323333;
}
.headers_right {
  display: flex;
}
.headers_right span {
  font-family: "PingFang SC", sans-serif;
  font-weight: bold;
  font-size: 18px;
  color: #323333;
}
.headers_right .headers_right_title {
  font-family: PingFang SC;
  font-weight: 500;
  font-size: 14px;
  color: #666666;
  margin-left: 15px;
  cursor: pointer;
  transition: background 0.3s; /* 添加过渡效果 */
}
.headers_left_select {
  margin-right: 20px;
}
.headers_left {
  display: flex;
  align-items: center;
}

.year-picker {
  margin-right: 20px;
}
.headers_left_input {
  margin-right: 20px;
}

.headers_left_more {
  font-family: PingFang SC;
  font-weight: 400;
  font-size: 14px;
  color: #1e4398;
  cursor: pointer;
}
.carous_img {
  width: 100%;
  height: 100%;
}

.headers_order_cnter span {
  border-left: 4px solid #1e4398;
  padding-left: 9px;
}

.content {
  margin-top: 10px; /* 内容与标题之间的间距 */
}
.contentBoxarrary_img {
  img {
    width: 33px;
    height: 33px;
  }
}
.contentBoxarrary {
  flex: 0 0 3%;
  .contentBoxarrary_img {
    padding-top: 62px;
    padding-left: 10px;
  }
}
.contentBox {
  overflow-x: scroll;
  display: flex;
  .contentBox_left {
    flex: 0 0 25%;
    padding: 20px;
    background: rgba(255, 255, 255, 0.6);
    box-shadow: 0px 2px 6px 0px rgba(139, 157, 175, 0.1);
    border-radius: 10px;
    .contentBox_left_title {
      font-family: PingFang SC;
      font-weight: bold;
      font-size: 20px;
      color: #333333;
      text-align: center;
    }
    .contentBox_left_content {
      display: flex;
      justify-content: center;
      margin-top: 20px;

      .contentBox_left_content_left {
      }
      .contentBox_left_content_center {
        .contentBoxarrary_img {
          margin: 0 5px;
          img {
            width: 33px;
            height: 33px;
          }
        }
      }
      .contentBox_left_content_right {
        .contentBox_left_content_left_title {
          .contentBox_left_content_left_title_box {
            min-height: 40px;
            background: #f0f5ff;
            border: 1px solid #d5e3ff;
            border-radius: 20px 0px 20px 0px;
            /* padding: 20px; */
            /* padding: 7px; */
            text-align: center;
            margin-bottom: 15px;
            padding: 8px 32px;
            min-width: 80px;
            max-width: 80px;

            .contentBox_left_content_left_title_box_title {
              span {
                font-family: PingFang SC;
                font-weight: bold;
                font-size: 12px;
                color: #437ded;
              }
            }
            .contentBox_left_content_left_title_box_number {
              margin-top: 2px;

              span {
                font-family: PingFang SC;
                font-weight: bold;
                font-size: 12px;
                color: #ff5050;
              }
            }
          }
        }
      }
    }
  }
  .contentBox_center {
    padding: 20px;
    flex: 0 0 25%;
    background: rgba(255, 255, 255, 0.6);
    box-shadow: 0px 2px 6px 0px rgba(139, 157, 175, 0.1);
    border-radius: 10px;
    .contentBox_left_title {
      font-family: PingFang SC;
      font-weight: bold;
      font-size: 20px;
      color: #333333;
      text-align: center;
    }
    .contentBox_left_content {
      display: flex;
      justify-content: center;
      margin-top: 20px;
      .contentBox_left_content_left {
      }
      .contentBox_left_content_center {
        .contentBoxarrary_img {
          margin: 0 5px;
          img {
            width: 33px;
            height: 33px;
          }
        }
      }
      .contentBox_left_content_right {
        .contentBox_left_content_left_title_box {
          min-height: 40px;
          background: #f0f5ff;
          border: 1px solid #d5e3ff;
          border-radius: 20px 0px 20px 0px;
          /* padding: 20px; */
          /* padding: 7px; */
          text-align: center;
          padding: 8px 32px;
          margin-bottom: 15px;
          min-width: 90px;
          max-width: 90px;
          cursor: pointer;

          .contentBox_left_content_left_title_box_title {
            span {
              font-family: PingFang SC;
              font-weight: bold;
              font-size: 12px;
              color: #437ded;
            }
          }
          .contentBox_left_content_left_title_box_number {
            margin-top: 2px;
            span {
              font-family: PingFang SC;
              font-weight: bold;
              font-size: 12px;
              color: #ff5050;
            }
          }
        }
      }
    }
  }
  .contentBox_right {
    flex: 1;
    padding: 20px;
    background: rgba(255, 255, 255, 0.6);
    box-shadow: 0px 2px 6px 0px rgba(139, 157, 175, 0.1);
    border-radius: 10px;
    .contentBox_left_title {
      font-family: PingFang SC;
      font-weight: bold;
      font-size: 20px;
      color: #333333;
      text-align: center;
    }
    .contentBox_left_content {
      display: flex;
      justify-content: center;
      margin-top: 20px;
      .contentBox_left_content_left {
      }
      .contentBox_left_content_center {
        .contentBoxarrary_img {
          margin: 0 5px;
          img {
            width: 33px;
            height: 33px;
          }
        }
      }
      .contentBox_left_content_right {
        .contentBox_left_content_left_title_box {
          min-height: 40px;
          background: #f0f5ff;
          border-radius: 20px 0px 20px 0px;
          border: 1px solid #d5e3ff;
          /* padding: 20px; */
          /* padding: 7px; */
          text-align: center;
          padding: 8px 32px;
          margin-bottom: 15px;
          min-width: 80px;
          max-width: 80px;

          .contentBox_left_content_left_title_box_title {
            span {
              font-family: PingFang SC;
              font-weight: bold;
              font-size: 12px;
              color: #437ded;
            }
          }
          .contentBox_left_content_left_title_box_number {
            margin-top: 2px;
            span {
              font-family: PingFang SC;
              font-weight: bold;
              font-size: 12px;
              color: #ff5050;
            }
          }
        }
      }
    }
  }
}
.contentBox_left_content_left_title_box {
  cursor: pointer;
  font-family: PingFang SC;
  font-weight: bold;
  font-size: 14px;
  color: #ffffff;
}
</style>
      